<template>		
	<v-chart 
		:forceFit="true" 
		:height="height" 
		:data="data" 
		:scale="scale" class="v-chart">
  		<v-tooltip :showTitle="false" dataKey="item*percent" />
  		<v-axis />
  		<v-legend dataKey="item" />
  		<v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
  		<v-coord type="theta" />
	</v-chart>
</template>

<script type="text/javascript">
	/**
	 * antv and viser 基础饼图，代码略有改动
	 */

	const DataSet = require('@antv/data-set');
	
	const sourceData = [
	    { item: '事例一', count: 40 },
	    { item: '事例二', count: 21 },
	    { item: '事例三', count: 17 },
	    { item: '事例四', count: 13 },
	    { item: '事例五', count: 9 }
  	];
  	
  	const scale = [{
	    dataKey: 'percent',
	    min: 0,
	    formatter: '.0%',
  	}];
  	
  	const dv = new DataSet.View().source(sourceData);
  	dv.transform({
    	type: 'percent',
    	field: 'count',
    	dimension: 'item',
    	as: 'percent'
  	});
  	
  	const data = dv.rows;

	export default {
		name:"viser-basic-pie",
		data(){
			return {
		        data,
		        scale,
		        height: 400,
		        pieStyle: {
		        	stroke: "#fff",
		          	lineWidth: 1
		        },
		        labelConfig: ['percent', {
		          	formatter: (val, item) => {
		            	return item.point.item + ': ' + val;
		          	}
		        }]
	      	}
		}		
	}
</script>